<template>
  <div class="tool-list">
    <div
      class="tool-item"
      v-for="(item, index) in list"
      :key="index"
      @click="handleOperat(item)"
    >
      <el-tooltip
        class="item"
        effect="dark"
        :content="item.name"
        placement="left"
      >
        <i :class="item.icon"></i>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import DrawMethods from "../../js/draw";
const list = [
  {
    name: "放大",
    icon: "el-icon-zoom-in",
    fn: "handleZoom",
    params: 1,
  },
  {
    name: "缩小",
    icon: "el-icon-zoom-out",
    fn: "handleZoom",
    params: -1,
  },
  {
    name: "距离",
    icon: "el-icon-finished",
    fn: "handleDraw",
    params: "LineString",
  },
  {
    name: "面积",
    icon: "el-icon-crop",
    fn: "handleDraw",
    params: "area",
  },
  {
    name: "ERBL",
    icon: "el-icon-aim",
    fn: "handleERBL",
  },
  {
    name: "清空测绘",
    icon: "el-icon-delete",
    fn: "handleClearDraw",
  },
];
export default {
  props: {
    map: {
      default: () => {},
    },
  },
  data() {
    return {
      list,
    };
  },
  methods: {
    handleOperat(row) {
      this[row.fn](row);
    },
    // 缩放
    handleZoom(row) {
      const view = this.map.getView();
      const zoom = view.getZoom();
      view.setZoom(zoom + row.params);
    },
    // 测绘
    handleDraw(row) {
      DrawMethods.measure(this.map, row.params);
    },
    // ERBL
    handleERBL() {
      DrawMethods.measureERBL(this.map);
    },
    // 清空绘制
    handleClearDraw() {
      var layerTmp = this.map
        .getLayers()
        .getArray()
        .find((m) => m.get("name") === "DRAW");
      if (layerTmp) DrawMethods.handleClearDraw(layerTmp, this.map);
    },
  },
};
</script>

<style scoped lang="scss">
.tool-list {
  border: 1px solid #f0f0f0;
  position: absolute;
  z-index: 1000;
  right: 20px;
  bottom: 20px;
  background-color: #fff;
  padding: 8px 2px;
  border-radius: 3px;
  .tool-item {
    padding: 7px 6px;
    cursor: pointer;
    i {
      font-size: 18px;
      color: #666;
    }
    &:hover {
      i {
        color: $base-theme-sub-color;
      }
    }
  }
}
</style>
